@mixin custom-color($key, $value) {
  .bg-#{$key} {
    background: $value !important;
  }
  .text-#{$key} {
    color: $value !important;
  }
}

:root {
  @each $item in $custom-colors {
    $key: map-get($item, key);
    $value: map-get($item, value);
    --q-#{$key}: #{$value};
    @include custom-color($key, $value);
  }
}

.custom-loading-box-class {
  position: relative;
  &::before {
    content: "";
    background-image: url("~assets/img/logo-96x96.png");
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
    width: 45%;
    height: 45%;
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    background-color: #ff5c00;
    border-radius: 50%;
  }
}

.str-separator + .str-separator {
  &::before {
    content: ", ";
  }
}

.min-height-inherit {
  min-height: inherit;
}

.region-drag {
  -webkit-app-region: drag;
}

input,
a,
button,
.cursor-pointer,
.q-field,
textarea {
  -webkit-app-region: none !important;
}
